<template>
  <div class="vue-router clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">动画过渡</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // 需配合animate.css使用<br>
            &lt;transition  name="custom-classes-transition"  enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" &gt;<br>
              &nbsp;&nbsp;&lt;router-view&gt;&lt;/router-view&gt;<br>
            &lt;/transition&gt;
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">按需加载</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            component: resolve => require(['@/pages/HelloWorld'], resolve)
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">路由传参</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            // query带入url,手动刷新后存在；params隐藏参数，手动刷新后注销<br>
            this.$router.push({<br>
              &nbsp;&nbsp;name: "",<br>
              &nbsp;&nbsp;query: "",<br>
              &nbsp;&nbsp;params: ""<br>
            });<br>
            this.$route.query   |   this.$route.params   // 接收参数(注意是route不是router)
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">html跳转</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            &lt;router-link :to="{name: '', query: ''}"&gt; &lt;/router-link&gt;
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">路由拦截</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            router.beforeEach((to, from, next) => {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要拦截<br>
                &nbsp;&nbsp;&nbsp;&nbsp;next({<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;path: '/',<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;query: {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;redirect: to.fullPath<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
                &nbsp;&nbsp;&nbsp;&nbsp;});<br>
              &nbsp;&nbsp;} else {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;next()<br>
              &nbsp;&nbsp;}<br>
            })
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueRouter'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-router{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
